<template>
  <div class="order_detail_wrapper">
    <order-detail-header :headTitle="headTitle">
      <div slot="header_right" class="header_right">
        <span class="iconfont">&#xe68b;</span>
      </div>
    </order-detail-header>
    <div v-if="!showLoading">
      <div class="order_detail">
        <div class="status_head">
          <div class="statustext">
            {{orderDetail.status_bar.title}}
            <span class="iconfont arrow">&#xe63c;</span>
          </div>
          <div class="status_title">{{orderDetail.timeline_node.description}}</div>
          <div class="helptext">{{orderDetail.status_bar.sub_title}}</div>
          <div class="ordercard_bottom">
            <router-link :to="{path: '/shop', query: {geohash, id: orderDetail.restaurant_id}}">
              <button class="cardbutton">再来一单</button>
            </router-link>
          </div>
        </div>
      </div>
      <div class="restaurant_card">
        <div class="head">
          <div class="name_con">
            <img class="avatar" :src="imgBaseUrl + orderDetail.restaurant_image_url">
            <span class="name">{{orderDetail.restaurant_name}}</span>
          </div>
          <span class="iconfont arrow">&#xe63c;</span>
        </div>
        <div class="product_list">
          <ul class="cart_item">
            <li class="product_item group" v-for="(item, index) of orderDetail.basket.group[0]" :key="index">
              <div class="profile">
                <p class="name">{{item.name}}</p>
              </div>
              <span class="quantity"><span>x</span>{{item.quantity}}</span>
              <span class="number"><span>¥</span>{{item.price}}</span>
            </li>
          </ul>
        </div>
        <ul class="listitem">
          <li class="product_item">
            <div class="profile">
              <p class="name">{{orderDetail.basket.packing_fee.name}}</p>
            </div>
            <span class="quantity"><span>x</span>{{orderDetail.basket.packing_fee.quantity}}</span>
            <span class="number"><span>¥</span>{{orderDetail.basket.packing_fee.price}}</span>
          </li>
          <li class="product_item">
            <span class="name">配送费</span>
            <span class="number"><span>¥</span>{{orderDetail.basket.deliver_fee && orderDetail.basket.deliver_fee.price || 0}}</span>
          </li>
        </ul>
        <!-- <div class="price">
          <p class="product_item">
            <span class="name"><span>首次光顾立减</span></span>
            <span class="discount"><span>- </span><span>¥</span>5</span>
          </p>
        </div> -->
        <div class="finalprice">
          <div class="contact_shop">
            <div class="call_shoper">
              <span class="iconfont">&#xe64d;</span>
              <span>联系商家</span>
            </div>
          </div>
          <div class="total_price">
            <p>实付<span>¥{{orderDetail.total_amount.toFixed(2)}}</span></p>
          </div>
        </div>
      </div>
      <div class="detail_card">
        <!-- <div class="detailcard_rate card">
          <span class="title">我的评价</span>
          <span class="iconfont arrow">&#xe63c;</span>
        </div> -->
        <div class="detailcard_delivery card">
          <div class="title">配送信息</div>
          <ul class="cardlist">
            <li class="listitem">
              <span>送达时间：</span>{{orderData.deliver_time}}
            </li>
            <li class="listitem">
              <span>送货地址：</span>
              <div class="content">
                <p>{{orderData.consignee}}</p>
                <p>{{orderData.phone}}</p>
                <p>{{orderData.addressDetail}}</p>
              </div>
            </li>
            <li class="listitem">
              <span>配送方式：</span>蜂鸟专送
            </li>
            <li class="listitem wide">
              <span class="listitem_title">
                <img src="//cube.elemecdn.com/4/8c/f62abf3d293267e1a381e37d8d265png.png" alt="准时达PLUS" class="ontimeplus-logo">
                服务详情
              </span>
              <span class="listitem-link__desc">准时送达</span>
            </li>
          </ul>
        </div>
        <div class="detailcard_order card">
          <div class="title">订单信息</div>
          <ul class="cardlist">
            <li class="listitem"><span>订单号：</span>{{orderDetail.id}}</li>
            <li class="listitem"><span>支付方式：</span>在线支付</li>
            <li class="listitem"><span>下单时间：</span>{{orderDetail.formatted_created_at}}</li>
          </ul>
        </div>
      </div>
    </div>
    <transition name="loading">
      <loading v-show="showLoading"></loading>
    </transition>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import OrderDetailHeader from '@/components/header/Header'
import loading from '@/components/common/Loading'
export default {
  name: 'OrderDetail',
  components: {
    OrderDetailHeader,
    loading
  },
  data () {
    return {
      headTitle: '订单详情',
      showLoading: true, // 显示加载动画
      orderData: null,
      imgBaseUrl: 'https://elm.cangdu.org/img/'
    }
  },
  mounted () {
    this.initData()
  },
  computed: {
    ...mapState(['orderDetail', 'geohash', 'userInfo'])
  },
  methods: {
    initData () {
      if (this.userInfo && this.userInfo.user_id) {
        this.$api.home.getOrderDetail(this.userInfo.user_id, this.orderDetail.unique_id).then(res => {
          this.orderData = res.data
          this.showLoading = false
        })
      }
    }
  },
  watch: {
    userInfo (value) {
      if (value && value.user_id) {
        this.initData()
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .order_detail_wrapper
    position: fixed
    top: 0
    left: 0
    right: 0
    bottom: 0
    z-index: 100
    overflow-y: auto
    background-color: #f2f2f2
    padding-top .88rem
    .order_detail
      .status_head
        position: relative;
        margin: .2rem
        background-color: #fff
        padding: 0 .24rem .4rem
        .statustext
          margin: 0 auto .32rem
          color: #333
          font-size: .50rem
          text-align: left
          padding: .32rem 0
          border-bottom: .01rem solid #f5f5f5
        .status_title
          font-size: .34rem
          color: #333
          margin-bottom: .15rem
        .helptext
          color: rgba(0, 0, 0, .5)
          font-size: .24rem
        .ordercard_bottom
            display: flex
            margin-left: -.08rem
            .cardbutton
              padding: 0 .16rem
              height: .6rem
              max-width: 2.8rem
              white-space: nowrap
              border-radius: .08rem
              font-size: .26rem
              color: #333
              margin: .3rem .06rem 0
              border: .01rem solid #ccc
              background-color: transparent
              color: #2395ff
              border-color: #2395ff
    .restaurant_card
      margin: .2rem
      background-color: #fff
      padding: 0 .24rem .4rem
      background-color: #fff
      border-top: .01rem solid #efefef
      border-bottom: .01rem solid #efefef
      .head
        display: flex
        align-items: center
        padding: .28rem 0
        border-bottom: .03rem solid #eee
        justify-content: space-between
        .name_con
          display: flex
          color: #333
          font-size: .28rem
          align-items: center
          .avatar
            width: .4rem
            height: .4rem
            margin-right: .15rem
      .product_item
        display: flex
        justify-content: space-between
        align-items: center
        font-size: .28rem
        position: relative
        color: #6e6e6e
        border-top: .01rem solid #f5f5f5
        min-height: .8rem
        padding: .05rem 0
        &:last-child
          margin-bottom: 0
        .quantity
          color: #151515
          flex: 1
          text-align: right
        .profile
          flex: 9
        .number
          flex: 2
          text-align: right
        .discount
          color: #f00
      .product_item .name
        font-size: .28rem
        color: #333
        ellipsis()
      .cart_item .product_item:first-of-type
        border: 0
    .finalprice
      display: flex
      margin-top: .04rem
      border-top: .03rem solid #eee
      color: #151515
      font-size: .28rem
      text-align: right
      padding: .4rem 0 0
      justify-content: space-between
      .contact_shop
        display: flex
        align-items: center
        font-size: .28rem
        color: #2395ff
      .total_price span
        font-size: .36rem
        margin-left: .1rem
    .detail_card
      margin: .2rem
      box-shadow: 0 .01rem .02rem 0 rgba(0,0,0,.05)
      .card
        background-color: #fff
        margin-bottom: .2rem
        .title
          font-size: .3rem
          color: #333
          border-bottom: .01rem solid #eee
          padding-left: .24rem
          line-height: .8rem
        .cardlist
          color: #6e6e6e
          padding-left: .24rem
          border-bottom: .01rem solid #eee
          .listitem
            display: flex
            align-items: baseline
            line-height: .48rem
            font-size: .28rem
            padding: .24rem .3rem .20rem 0
            &:not(:last-child)
              border-bottom: .01rem solid #f5f5f5
            &.wide
              display: flex
              align-items: center
              justify-content: space-between
              .listitem_title
                display: flex
                align-items: center
                img
                  height: .28rem
      .detailcard_rate
        padding-right: .24rem
        display: flex
        align-items: center
        justify-content: space-between
        border-top: .01rem solid #f5f5f5
        background-color: #fff
        margin-bottom: .2rem
    .loading-enter-active, .loading-leave-active
      transition: opacity 1s
    .loading-enter, .loading-leave-active
      opacity: 0
</style>
